このページは私用WordPressの覚え書き兼、テストページです。
「SNSボタン」は、テスト検証用に仮設置しているだけなので、押しても反応しません。

004_2 wp_is_mobile タグを使うか否か

レスポンシブ対応に関する覚書き


wordpress には、あらかじめ用意されている wp_is_mobile() というタグがあります。
これは「モバイル(スマホ・タブレット)から閲覧されているかどうか」という判定をします。

しかし、wordpressのwp_is_mobile() タグは、

mobile=スマートフォン&タブレット
PC=パソコン という判定をします。

これはちょっと違うんじゃないか? というか・・・

mobile=スマートフォン
それ以外は=タブレットとPC(widthでPCとタブレットを切り替える) 
としたいう方がいいのでは という意見があります。


各メディアの画面サイズ

PC (横幅:960px)
iPhone 4 / 4S (縦:640×960 横:960×640)
iPad (縦:768×1024px 横:1024×768px)


ということで、wp_is_mobile() タグは使わずに、新たに独自タグを設定する、という方法があります。


新しく is_mobile タグを作る(functions.php)

<?php
//スマホ表示分岐(is_mobileを有効にする)
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
 
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

functions.php に上記タグを追記すると、is_mobile タグを使うことができるようになります。
タブレットはこの中に入っていないので、PCと同じ扱いになります。


条件分岐

<?php if ( is_mobile() ) : ?>
	// スマホで表示させたい内容
<?php else: ?>
	// PCで表示させたい内容
<?php endif; ?>


004_1レスポンシブ対応にする

以下覚え書き


cssの切り替え方法

ひとつの style.css の中にまとめて記述して「PC用」「タブレット用」「スマホ用」を切り替える方法と、 「style.css(PC用)」「style_tablet.css(タブレット用)」「style_smart.css(スマホ用)」の3つの cssファイルを作って切り替える方法、とがありますが、

修正のしやすさ、メンテナンスの使い勝手を考えるなら、後者の3つのcssファイルを作る方がいいと思う。

wordpressのテーマに入れるスタイルシートのファイル名は、「style.css」にするという決まりがあるので、PC用の名前は、style.cssのまま変えない方がよいと思う。

画面サイズ

PC (横幅:960px)
iPhone 4 / 4S (縦:640×960 横:960×640)
iPad (縦:768×1024px 横:1024×768px)


外部CSS記述(3つのcssを作り、振り分けて記述、それを読み込ませる)

header.phpの中に記述)

	<!--PC用CSS-->
	<link rel="stylesheet" media="screen and (min-width: 769px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">
	
	<!--タブレット用CSS-->
	<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_tablet.css">
	
	<!--スマホ用CSS-->
	<link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_smart.css">

※以前は、絶対パスでCSSのURLを入れていましたが、引越しすると直さなければならなくなるので、phpで読み込む形に変更。

PC用CSSstyle.css
タブレット用CSSstyle_tablet.css
スマホ用CSSstyle_smart.css と3種類のcssファイルを用意します。


画像を自動伸縮(各style.css)

デバイスに合わせてヘッダ画像などは伸び縮みさせたいので、
3種のCSSファイルに共通事項として、

/* 画像を自動伸縮する */
img{
max-width: 100%;
height: auto;
width /***/:auto;
}

を入れます。
※ヘッダーのタイトル画像を背景固定にしている場合、自動伸縮しないので、通常のimg srcに切り替えます。


スマホでズームさせたいいかどうか(header.php)

header.phpのヘッダー部分に下記を記述します。

<!DOCTYPE html> 
<html>
<head>
	<!--	スマホ ズームさせない場合 -->
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
	
	
	<!--	スマホ ズームさせる場合 -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">


レスポンシブ、その他の調整

その他の細かい設定は、テーマの内容によっても変わってくるので、随時確認しながら変えていく形です。


その他、追記したものメモ

各CSSの
/**********************************************************
基本body
**********************************************************/

に下記を追加
  ↓

overflow-x:hidden; /* 横のスクロールバーを消す */
-webkit-text-size-adjust: 100%; /* スマホ用 */


チェックツール
www.responsinator.com

最後にGoogleモバイル フレンドリーでチェック。
Googleモバイル フレンドリーテスト